@import "~taro-ui/dist/style/components/form.scss";
@import "~taro-ui/dist/style/components/input.scss";
@import "~taro-ui/dist/style/components/button.scss";
@import "~taro-ui/dist/style/components/loading.scss";
@import "~taro-ui/dist/style/components/image-picker.scss";
@import "~taro-ui/dist/style/components/list.scss";
@import "~taro-ui/dist/style/components/textarea.scss";
@import "~taro-ui/dist/style/components/icon.scss";
@import "~taro-ui/dist/style/components/switch.scss";
@import '../../styles/theme.scss';

.operate_page {
  .switch_control {
    display: flex;
    // justify-content: flex-end;
    align-items: center;
    // .at-switch{
    //     display: inline-block;
    // }
  }

  .text-success {
    color: green;
  }

  .text-error {
    color: red;
  }

  padding: 24px 42px 42px;

  .at-button--primary {
    background-color: $primary-color;
    border-color: $primary-color;
  }

  .at-button--secondary {
    border-color: $primary-color;
    color: $primary-color;
    width: 200px;
    margin-top: 24px;
    margin-left: 24px;
  }

  .at-form::after {
    display: none;
  }

  .files-picker {
    margin-bottom: 48px;

    .at-image-picker__flex-box {
      padding: 24px 24px 24px 0;
    }
  }

  .form_video-wrapper {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    padding: 24px;

    .detail__page-banner {
      width: 300px;
      height: 200px;
      align-self: center;
      margin-right: 24px;

      .recommend_box_vedio_item {
        display: inline-block;
        box-sizing: border-box;
        position: relative;
        width: 100%;
        height: 100%;
        transition: all .2s;
        border-radius: 18px;

        .recommend_box_vedio_item-img {
          width: 100%;
          height: 100%;
          border-radius: 18px;
        }

        .recommend_box_vedio_item-button {
          background: rgba(0, 0, 0, .3);
          color: #fff;
          font-size: 28px;
          position: absolute;
          right: 24px;
          top: 24px;
          height: 44px;
          line-height: 44px;
          border-radius: 14px;
          padding: 0 12px;
        }
      }

      .detail_video {
        width: 100%;
        height: 100%;
        position: relative;

        .detail_play {
          position: absolute;
          color: #fff;
          font-size: 36px;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      }

      .detail__page-banner-img {
        width: 100%;
        height: 100%;
        border-radius: 18px;
      }

      .detail__page-banner-cover-video {
        width: 100%;
        height: 100%;
        z-index: 2;
      }

      .detail__page-banner-video {
        width: 100%;
        height: 100%;
        z-index: 1;
      }
    }

    .at-icon {
      flex: 1;
      font-size: 42px;
      margin-left: 32px;
      color: red;
    }
  }

  .form_video {
    flex: 1;
    height: 200px;
    z-index: 1;
  }

  .form_row {
    display: flex;

    .form_item {
      width: 50%;

      .at-image-picker__flex-item:nth-child(3) {
        display: none;
      }

      .at-image-picker__flex-item:nth-child(4) {
        display: none;
      }
    }
  }

  .empty_avator {
    .at-image-picker__flex-item:nth-child(1) {
      display: none;
    }
  }

  .form_item {
    display: flex;
    padding-top: 12px;
    padding-bottom: 12px;

    .form_label {
      margin: 24px 24px 0 0;
      // padding-left: 32px;
      color: $dark;
      font-weight: bold;
      // border-left: 4px solid $primary-color-dark;
    }

    .at-list__item {
      padding-left: 32px;
      border-top: 0;
    }

    .at-textarea {
      border-top: 0;
      border-left: 0;
      border-right: 0;
      padding-left: 32px;
    }

    .at-list__item {
      color: #666;
    }

    .at-list::after {
      display: none;
    }

    .form_control {
      flex: 1;
    }
  }

  .submit_button {
    margin-top: 24px;
  }
}
